<template>
    <!-- 分割线配置 -->
    <div class="prop-divider">
        <el-form size="mini" label-suffix="：" label-width="80px">
            <el-form-item label="id">{{ data.id }}</el-form-item>
            <el-form-item label="布局">
                <el-radio-group v-model="data.options.direction">
                    <el-radio-button label="horizontal">横向</el-radio-button>
                    <el-radio-button label="vertical">纵向</el-radio-button>
                </el-radio-group>
            </el-form-item>
            <el-form-item label="颜色">
                <el-color-picker v-model="data.options.backgroundColor"></el-color-picker>
            </el-form-item>
            <el-form-item label="线宽">
                <el-input-number v-model="data.options.lineWidth" placeholder="线宽" :controls="false" :min="1" :max="10"></el-input-number>
                <span class="unit">(px)</span>
            </el-form-item>
            <el-form-item label="间距">
                <el-input-number v-model="data.options.margin" placeholder="间距" :controls="false" :min="0" :max="100"></el-input-number>
                <span class="unit">(px)</span>
            </el-form-item>
            <el-form-item label="设置文案">
                <el-input v-model.trim="data.options.content" placeholder="可设置文案" clearable></el-input>
            </el-form-item>
            <el-form-item label="文案位置">
                <el-radio-group v-model="data.options.contentPosition">
                    <el-radio-button label="left">左</el-radio-button>
                    <el-radio-button label="center">中</el-radio-button>
                    <el-radio-button label="right">右</el-radio-button>
                </el-radio-group>
            </el-form-item>
        </el-form>
    </div>
</template>

<script>
export default {
    name: "PropDivider",
    props: {
        data: {
            type: Object
        }
    }
}
</script>
